<template>
  <div>
    <div v-for="(item, index) in userList" :key="index" class="userList" :class="index == showUser ? 'showUser' : ''" @click="heandleShow(index)">
      <img src="https://xecho.oss-cn-hangzhou.aliyuncs.com/blog/avatar17.png" alt="">
      <div class="userInfo">
        <div class="title">{{ item.name }}</div>
        <div class="info">{{ item.msg }}</div>
      </div>
      <el-badge :value="1" class="unread" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [
        { name: '小明', msg: '你好啊' },
        { name: '无为而治', msg: '我有些问题想要请教你，你看可以吗' },
        { name: '永远的神', msg: '有优惠吗' },
        { name: '小飞棍来喽', msg: '你好啊' },
        { name: '橘子姑娘', msg: '宝贝在吗' }
      ],
      showUser: 0
    }
  },
  computed: {
    length() {
      return this.userList.length - 1
    }
  },
  methods: {
    heandleShow(index) {
      this.showUser = index
      console.log(index)
    }
  }
}
</script>

<style lang="scss" scoped>
.showUser{
  position: relative;
  overflow: hidden;
  &::before{
    content: '';
    position: absolute;
    background: rgb(205, 79, 79);
    height: 100%;
    width: 10px;
    top: 0;
    left: 0;
    box-shadow: 10px;
  }
}

.userList {
  background: #fff;
  vertical-align: middle;
  display: flex;
  padding: 10px 10px 10px 40px;
  margin: 10px;
  border-radius: 10px;
  position: relative;
  box-shadow:
  0px 1.2px 1.2px -29px rgba(0, 0, 0, 0.022),
  0px 3px 3px -29px rgba(0, 0, 0, 0.031),
  0px 6.2px 6.2px -29px rgba(0, 0, 0, 0.039),
  0px 12.8px 12.8px -29px rgba(0, 0, 0, 0.048),
  0px 35px 35px -29px rgba(0, 0, 0, 0.07);

  &:hover {
    background: #DCDFE6;
  }

  img {
    width: 50px;
    height: 50px;
    margin-right: 30px;
  }

  .userInfo {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .title {
      font-size: 20px;
      font-weight: bold;
    }

    .info {
      color: #97a8be;
      width: 180px;
      margin-top: 5px;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .unread{
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateX(-50%);
  }
}
</style>
